
.slide-in-right-animation {
    animation: slideInRight 300ms;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    70% {
        transform: translateX(-5%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-out-right-animation {
    animation: slideOutRight 300ms;
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    30% {
        transform: translateX(-5%);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.slide-in-left-animation {
    animation: slideInLeft 300ms;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    70% {
        transform: translateX(5%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-out-left-animation {
    animation: slideOutLeft 300ms;
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    30% {
        transform: translateX(5%);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.slide-in-bottom-animation {
    animation: slideInBottom 500ms ease-in-out;
}

@keyframes slideInBottom {
    0% {
        height: 0px;
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
    }
}

.slide-out-bottom-animation {
    animation: slideOutBottom 500ms ease-in-out;
}

@keyframes slideOutBottom {
    0% {
        transform: translateY(0);
        opacity: 1;

    }

    100% {
        height: 0px;
        opacity: 0;
        transform: translateY(100%);
    }
}
